<template>
  <div>
    <div>------------</div>
    <div class="cursor-pointer" @click="addCount()">增加数组第二个值</div>
    <div>reactive数组</div>
    <div>{{ count }}</div>

    <div>------------</div>
    <div class="cursor-pointer" @click="addCount2()">增加数组第二个值</div>
    <div>ref数组</div>
    <div>{{ count2 }}</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

interface RestaurantItem {
  value: string;
  link: string;
}

/* reactive 可以对数组，对象响应式 */
const count = reactive<RestaurantItem[]>([
  { value: "1", link: "2" },
  { value: "1", link: "2" },
  { value: "1", link: "2" },
]);
const addCount = () => {};

/* ref 只对基本数据进行响应式 ，对数组不具有响应式能力 */
const count2 = ref<RestaurantItem>({
  value: "1",
  link: "2",
});

const addCount2 = () => {
  // count2.value.value++
};
</script>

<style lang="scss" scoped></style>
